<template lang="">
  <div class="cart">
    <div class="head" v-if="cartList.length">
      <div>30天无忧退货</div>
      <div>48小时快速退款</div>
      <div>满88元免邮费</div>
    </div>
    <div class="list" v-if="cartList.length">
      <van-swipe-cell v-for="item in cartList" :key="item.id" class="item">
        <div class="item-content">
          <van-checkbox
            class="check"
            v-model="item.isChecked"
            checked-color="#b4282d"
          ></van-checkbox>
          <img :src="item.list_pic_url" />
          <div class="info">
            <p>{{ item.goods_name }}</p>
            <p>￥{{ item.retail_price }}</p>
          </div>
          <span class="num">x {{ item.number }}</span>
        </div>
        <!-- 左滑删除按钮 -->
         <template #right>
              <van-button square type="danger" class="delete-button" @click="deleteItem(item)">删除</van-button>
        </template>
      </van-swipe-cell>
    </div>
    <div class="empty" v-else>
      <van-empty description="购物车空空如也,快去购物吧~" />
    </div>
    <div class="footer">
      <div class="left">
        <van-checkbox v-model="ischeckedAll" checked-color="#b4282d"
          >全选</van-checkbox
        >
      </div>
      <div class="right">
        <span class="total">￥{{ total }}</span>
        <span class="placeorder" @click="placeorder">下单</span>
      </div>
    </div>
  </div>
</template>
<script>
import { cartList, submitAction, deleteAction } from "@/api/cart/index";
export default {
  data() {
    return {
      cartList: [], // 购物车列表
    };
  },

  methods: {
    async getCartList() {
      const { data } = await cartList({
        openId: localStorage.getItem("openId"),
      });
      this.cartList = data.map((item) => {
        return {
          ...item,
          isChecked: false,
        };
      });
    },
    //删除商品
     deleteItem(item) {
      this.$dialog
        .confirm({
          title: "警告",
          message: "该操作会永久删除该数据,确定删除吗?",
        })
        .then(async () => {
          const res = await deleteAction({
            id: item.id,
          });
          if (res) {
            this.$toast("删除成功");
            this.getCartList();
          } else {
            this.$toast("操作失败,请稍后再试");
          }
        });
    },
    // 下单
    async placeorder() {
      if (!this.cartList.length) {
        this.$toast("购物车空空如也,快去购物吧~");
        return;
      }
      if (this.total == 0) {
        this.$toast("请选择商品");
        return;
      }
      const { data } = await submitAction({
        allPrise: this.total,
        goodsId: this.cartList
          .filter((item) => item.isChecked)
          .map((item) => item.goods_id)
          .join(),
        openId: localStorage.getItem("openId"),
      });
      if (data) {
        this.$router.push("/cart/orderconfirm");
      } else {
        this.$toast("下单失败,请稍后再试");
      }
    },
  },

  computed: {
    // 统计被选中的商品
    total() {
      return this.cartList.reduce((sum, item) => {
        if (item.isChecked) {
          return sum + item.retail_price * item.number;
        } else {
          return sum;
        }
      }, 0);
    },
    // 全选和反选
    ischeckedAll: {
      get() {
        if (this.cartList.length) {
          return this.cartList.every((item) => item.isChecked);
        } else {
          return false;
        }
      },
      set(val) {
        this.cartList.forEach((item) => {
          item.isChecked = val;
        });
      },
    },
  },

  created() {
    this.getCartList();
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
